<template>
  <div class="app-container">
    <!-- <div class="flexBox">
      <div class="topItemBox" :class="{ active: topIndex === 0 }">
        <span class="topItemTitle">总线路条数</span>
        <span class="topItemNum">
          <GytNumeric
            :start="0"
            :end="zxlts"
            :autoPlay="true"
            :duration="2000"
          />
        </span>
      </div>
      <div class="topItemBox" :class="{ active: topIndex === 0 }">
        <span class="topItemTitle">累计全线采集</span>
        <span class="topItemNum"
          ><GytNumeric
            :start="0"
            :end="ljqxcj"
            :autoPlay="true"
            :duration="2000"
        /></span>
      </div>
      <div class="topItemBox" :class="{ active: topIndex === 0 }">
        <span class="topItemTitle">累计全线录入</span>
        <span class="topItemNum"
          ><GytNumeric
            :start="0"
            :end="ljqxlr"
            :autoPlay="true"
            :duration="2000"
        /></span>
      </div>
      <div class="topItemBox" :class="{ active: topIndex === 0 }">
        <span class="topItemTitle">累计发起工单</span>
        <span class="topItemNum"
          ><GytNumeric
            :start="0"
            :end="ljfqgd"
            :autoPlay="true"
            :duration="2000"
        /></span>
      </div>
    </div> -->
    <div class="echartBox">
      <div class="line-chart" id="unit_line_chart"></div>
    </div>
    <div class="echartBox">
      <div class="bar-chart" id="unit_bar_chart"></div>
    </div>
  </div>
</template>

<script setup name="Index">
import GytNumeric from "@/components/GytNumeric/GytNumeric.vue";

import { getStatCount, getUnitLineStatCount } from "@/api/platform/homeStat.js";
import { onMounted, onUpdated } from "vue";

import * as echarts from "echarts";

const { proxy } = getCurrentInstance();

const topIndex = ref(0);
const zxlts = ref(0);
const ljqxcj = ref(0);
const ljqxlr = ref(0);
const ljfqgd = ref(0);

const unitLineChart = ref(null);
const unitLineStatList = ref([]);

function getStatCountReq() {
  getStatCount({}).then((response) => {
    const data = response.data || {};
    zxlts.value = data.zxlts;
    ljqxcj.value = data.ljqxcj;
    ljqxlr.value = data.ljqxlr;
    ljfqgd.value = data.ljfqgd;
  });
}

function getUnitLineStatCountReq() {
  getUnitLineStatCount({}).then((response) => {
    unitLineStatList.value = response.data || [];
    handleUnitLineStatChart();
    handleUnitBarStatChart();
  });
}

function handleUnitLineStatChart() {
  const y_data = [];
  const x_data = [];
  unitLineStatList.value.forEach((item) => {
    y_data.push(item.unit);
    x_data.push(item.totalLineNum);
  });

  const option = {
    title: {
      text: "各单位线路总数",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: y_data,
    },
    series: [
      {
        type: "bar",
        color: '#006865',
        barWidth: 10,
        data: x_data,
      },
    ],
  };

  setTimeout(() => {
    const chartDom = document.getElementById("unit_line_chart");
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  }, 1000);

}

function handleUnitBarStatChart() {
  const y_data = [];
  const x_data = [];
  unitLineStatList.value.forEach((item) => {
    y_data.push(item.unit);
    x_data.push(item.fullLineCjl);
  });

  const option = {
    title: {
      text: "各单位治理合格率",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      min: 0,
      max: 100,
    },
    yAxis: {
      type: "category",
      data: y_data,
    },
    series: [
      {
        type: "bar",
        color: '#006865',
        barWidth: 10,
        data: x_data,
      },
    ],
  };

  setTimeout(() => {
    const chartDom = document.getElementById("unit_bar_chart");
    const myChart = echarts.init(chartDom);
    myChart.setOption(option);
  }, 1000);
}

onUpdated(() => {
  getStatCountReq();
  getUnitLineStatCountReq();
});

</script>

<style scoped lang="scss">
.flexBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: 0px;
  margin-right: 0px;
  .topItemBox {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 118px;
    padding: 23px 25px 0;
    background: #f2f0f7;
    border-radius: 7px;
    margin-right: 20px;
    position: relative;
    overflow: hidden;
    .topItemTitle {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #060606;
    }
    .topItemNum {
      font-size: 22px;
      font-family: "dobiNumber";
      font-weight: 400;
      color: var(--el-color-primary);
      margin-top: 10px;
      margin-left: 5px;
    }
    &:last-child {
      margin-right: 0;
    }
    &::before {
      content: "";
      display: block;
      width: 139px;
      height: 218px;
      position: absolute;
      top: -30px;
      right: -20px;
      transform: rotate(25deg);
      background: rgba(255, 255, 255, 0.12);
    }
  }
  .topItemBox:hover,
  .topItemBox.active {
    background: linear-gradient(
      136deg,
      var(--el-color-primary-light-3),
      var(--el-color-primary-light-1)
    );

    .topItemTitle {
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;
    }
    .topItemNum {
      color: #ffffff;
    }
  }
}

.echartBox {
  display: flex;

  .line-chart {
    min-height: 500px;
    width: 100%;
    margin-top: 0px;
  }
  .bar-chart {
    min-height: 500px;
    width: 100%;
    margin-top: 30px;
  }
}
</style>

